<template>
	<view class="swiper_com_box" :style="{height:`${height}rpx`}">
			<!-- :current="tabCurrent" -->
			<view class="ma-imgList1" v-if="advList.length <= 1" @tap="gotoAdvert(advList[0])"></view>
			<!-- 轮播图仅为1张时阻止左右滑动 -->
		 <swiper
		 	class="ma-imgList"
		 	circular
		 	:autoplay="autoPlay"
		 	:interval="interval"
		 	:duration="duration"
		 	@change="changeTab"
		 >
		 	<swiper-item v-for="(item, index) in advList" :key="index" @tap="gotoAdvert(item)"> 		
		 		<view class="swiper-item" :class="{}" :style="{'padding':paddinglr}">
					<!-- style="background-size: 60% 180%; background-position: center;"
					:style="{ backgroundImage: 'url(' + placeHolderImg + ')' }" -->
		 			<image
						class="simg"
						:style="{height:`${height}rpx`,borderRadius:`${radius}rpx`}"
		 				:src="imgUrl+item.src"
		 				mode="aspectFill"
		 			></image>
		 		</view>
		 	</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import { mnavTo } from '@/utils/helper';
	import {env} from '@/api/env.js'
	export default {
		name:"advSwiper",
		emits: ['change'],
		props:{
			isShow: {
			  type: Boolean,
			  default: false
			},
			autoPlay: {
			  type: Boolean,
			  default: false
			},
			interval:{
				type:Number,
				default:5000
			},
			height:{
				type:Number,
				default:100
			},
			duration:{
				type:Number,
				default:500
			},
			paddinglr:{
				type:String,
				default:'0'
			},
			list: {
				value: Array,
				default: []
			},
			radius:{
				type:Number,
				default:0
			}
		},
		watch: {
			list: {
				handler(val) {
					this.initList(val); //数据变化重新初始化list
				},
				immediate: true,
				deep: true
			},
		},
		data() {
			return {
				advList:[],
				imgUrl:env.imgBaseUrl
			};
		},
		created() {
		},
		methods:{
			changeTab(e){
				this.$emit('change')
			},
			initList(){
				this.advList = JSON.parse(JSON.stringify(this.list));
				console.log('advvv',this.advList)
			},
			gotoAdvert(item){
				// console.log(item)
				// navigateTo('/user/uploadTemplate/uploadTemplate?curBillId=B001')
				item&&item.url&&mnavTo(item.url)//,true,true
			}
		},
		
		
	}
</script>

<style lang="scss">
	.swiper_com_box{
		position: relative;
		overflow: hidden;
		.simg{
			width: 100%;
			height: 100%;
		}
	}
	.ma-imgList{
		width: 100%;
		height: 100%;
	}
	.ma-imgList1{
		position: absolute;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: transparent;
	}
</style>
